<template>
  <el-menu
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    router
    background-color="#fff"
    text-color="#333"
    active-text-color="#409EFF"
  >
    <template>
      <!-- 员工管理 -->
      <el-menu-item index="/employee-list" v-if="hasPermission([401])">
        <i class="el-icon-user"></i>
        <span slot="title">员工管理</span>
      </el-menu-item>

      <el-menu-item index="/order-management" v-if="hasPermission([201,401,402])">
        <i class="el-icon-s-order"></i>
        <span slot="title">订单管理</span>
      </el-menu-item>

        <el-menu-item index="/customer-management" v-if="hasPermission([201,401,402])">
          <i class="el-icon-user"></i>
          <span slot="title">客户管理</span>
        </el-menu-item>
        
      <!-- 合同管理 -->
      <el-submenu index="contract" v-if="hasPermission([201,401,402])">
        <template slot="title">
          <i class="el-icon-document" ></i>
          <span>合同管理</span>
        </template>
        <el-menu-item index="/contract-management" >合同文档管理</el-menu-item>
        <el-menu-item index="/contract-add" >新增合同</el-menu-item>
         <el-menu-item index="/contract-order-add" >新增合同生成订单</el-menu-item>
      </el-submenu>
      
      <!-- 工厂管理 -->
      <el-menu-item index="/factory-management" v-if="hasPermission([201])">
        <i class="el-icon-office-building"></i>
        <span slot="title">工厂管理</span>
      </el-menu-item>
      
      <!-- 设备管理 -->
      <el-submenu index="device" v-if="hasPermission([201])">
        <template slot="title">
          <i class="el-icon-cpu"></i>
          <span>设备管理</span>
        </template>
        <el-menu-item index="/device-management">设备管理</el-menu-item>
        <el-menu-item index="/accessory-management">配件管理</el-menu-item>
      </el-submenu>



    </template>
  </el-menu>
</template>

<script>
import { hasPermission } from '@/utils/permission';

export default {
  name: 'Sidebar',
  data() {
    return {
      menuData: [],
      userRole:'',
    }
  },
  computed: {
    // 实时获取用户角色
    currentUserRole() {
      return localStorage.getItem('role');
    }
  },
   created() {
          this.updateUserRole();
  },
  methods: {
    // 更新用户角色
    updateUserRole() {
      const userRole = localStorage.getItem('role');
      this.userRole = userRole;
    },
    
    fetchMenuData() {
    },
    hasPermission(allowedRoles) {
      // 检查用户角色是否在允许的角色列表中
      // 使用计算属性实时获取用户角色
      const userRole = parseInt(this.currentUserRole);
      
      // 如果用户角色为空或NaN，返回false
      if (!userRole || isNaN(userRole)) {
        return false;
      }
      
      return allowedRoles.includes(userRole);
    },
    
    // 检查用户是否有权限访问指定路径
    hasPathPermission(path) {
      return hasPermission(path, this.currentUserRole);
    }
  },
  watch: {
    '$route': {
      handler() {
        // 路由变化时重新获取用户角色
        this.updateUserRole();
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
.el-menu-vertical-demo {
  height: 100%;
  border-right: none;
  background-color: white !important;
  border-top:2px;
  border-color: #409EFF !important;
}

/* 覆盖 Element UI 的默认样式 */
.el-menu {
  background-color: white !important;
}

.el-menu-item {
  background-color: white !important;
}

.el-menu-item:hover {
  background-color: #f5f7fa !important;
}

.el-submenu__title {
  background-color: white !important;
}

.el-submenu__title:hover {
  background-color: #f5f7fa !important;
}

.el-menu-item.is-active {
  background-color: white !important;
  color: #409EFF !important;
}
</style> 